<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选择角色</title>
    <link rel="stylesheet" th:href="@{/css/admin/base.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">

    <style>
        .tree-con {
            width: 50%;
        }
    </style>
</head>

<body>
    <div class="app-content">
        <!-- 列表数据 -->
        <div class="z-table-con">
            <table class="z-table">
                <thead>
                    <th>
                        <input type="checkbox" class="j-checkbox-all">
                    </th>
                    <th>角色名</th>
                    <th>状态</th>
                    <th>描述</th>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="z-page z-pat">
                <span class="active">1</span>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#" class="last">尾页</a>
                <a href="#" class="next">下一页</a>
            </div>
        </div>
        <div class="body src-ids z-hide"></div>
        <div class="body src-names"></div>
    </div>

    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>

    <script>

        var pageParams = {
            roleId: '',
            search: '',
            pageNum: 1,
            pageSize: 10
        }

        $(function () {

            initTable();

            $(document).on('change', '.j-checkbox-all, .j-checkbox', function () {

                var nodes = zTable.getSelectedData();

                var names = [], ids = [];

                for (var i = 0; i < nodes.length; i++) {

                    names.push(nodes[i].roleName);
                    ids.push(nodes[i].roleId);
                }


                $('.src-ids').html(ids.join('<br/>'));
                $('.src-names').html(names.join('<br/>'));

                // $('.src-ids').html(getIds());
                // $('.src-names').html(getIds());

                console.log(getIds())
            })
        })

        function initTable() {
            zTable = $('.z-table-con').pagination({
                $pageShowArea: $('.z-page'),
                async: {
                    url: App.apiUrlHost + '/sysRole/listPage',// 请求地址
                    dataType: 'json',
                    type: 'POST',
                    data: pageParams // 请求参数
                },
                beforAjax: function (data) {

                    return {
                        pageNum: parseInt(data.start / pageParams.pageSize, 10) + 1
                    }
                },
                columns: [
                    {
                        className: 'j-checkbox-col',
                        width: '30px',
                        data: null,
                        render: function (data, type, row, meta) {
                            return '<input type="checkbox" class="j-checkbox" id="' + data.userId + '">';
                        }
                    },
                    { 'data': 'roleName', className: 'ellipsis' },
                    { 'data': 'status', className: 'ellipsis' },
                    { 'data': 'roleDesc', className: 'ellipsis' }
                ],
                beforeCreateRow: function ($row, data, index) {
                    console.log('createdRow');

                    return $row;
                },
                drawCallback: function (setting) {
                    console.log('drawCallback');
                },
                initComplete: function (setting, json) {
                    console.log('initComplete');
                },
                formartData: function (data) {
                    console.log('formartData');

                    return {
                        recordsTotal: data.data.total,
                        data: data.data.list,
                    }
                }
            });

            zTable.init();
        }

        function getIds() {

            var ids = [];
            var datas = zTable.getSelectedData();
            // $.each($('.z-table input:checkbox:checked'), function () {
            $.each(datas, function (i) {

                console.log(datas[i].roleId);
                if (datas[i].roleId) {
                    ids.push(datas[i].roleId);

                }
            });

            return ids.join(',');
        }

    </script>
</body>

</html>